﻿<div class="avatar clearfix">
    <div class="avatar-left placeholder">
        <div id="crop-container">
        </div>
         <div class="result">
            <div class="txt">
                Here you will see the cropped image</div>
                <img id="generated" src="" style="display:none" />
        </div>
        <div class="buttons">
        <div class="senddata">
            Crop</div>
        <div class="restore_data">
            Restore</div>
        <div style="clear: both">
        </div>
    </div>
    </div>
    <div class="avatar-right placeholder">asdfasdf
    </div>
</div>
<style type="text/css">
    .avatar { width: 510px; margin: 5 auto; }
    .avatar-left { width: 300px; float: left; }
    .avatar-right { width: 200px; float: left; }
    #zoom, #rot { width: 360px; margin: auto; height: 25px; }
</style>
<script type="text/javascript">
    $(document).ready(function () 
        {
        var cropzoom = $('#crop-container').cropzoom({
            width: 280,
            height: 250,
            bgColor: '#CCC',
            enableRotation: true,
            enableZoom: true,
            zoomSteps: 10,
            rotationSteps: 10,
            selector: {
                w: 180,
                h: 180,
                maxWidth: 180,
                maxHeight: 180,
                centered: true,
                borderColor: 'blue',
                borderColorHover: 'red'
            },
            image: {
                source: '/Content/pic.jpg',
                width: 541,
                height: 647,
                minZoom: 10,
                maxZoom: 150
            }
        });
        //cropzoom.setSelector(45, 45, 180, 180, true);
        $('.senddata').click(function () {
            cropzoom.send('/Home/Avatar', 'POST',{} ,function (imgRet) {
                $(".result").find(".txt").hide();
                $("#generated").attr("src", imgRet).show();
            });
        });
        $('#restore').click(function () {
            $('.result').find('img').remove();
            $('.result').find('.txt').show();
            cropzoom.restore();
        });
    })
</script>
